<template>

    <div>
        <div>
            <Row>
            <Col span="8">
                <router-link to='/news' active-class="active" tag="button" type="parmary" style="background:#6cf;margin-bottom:10px;margin-left:16px" >返回新闻</router-link>
            </Col>
            <Col span="8">
                <Input v-model="filter.name" style="width:300px;margin-bottom:10px">
                    <Button slot="append" icon="ios-search" @click="search"></Button>
                </Input>
            </Col>
            <Col span="8">
                <ButtonGroup style="float:right;margin-right:52px">
                <Button type="primary" @click="addDate" style="margin-right:20px">添加数据</Button>
                <Button type="error" @click="removes">批量删除</Button>
                </ButtonGroup>
            </Col>
            </Row>
            
        </div>
        
        
        <Table border :columns="columns" :data="list" @on-selection-change="onSelectionChange"></Table>
        <Page :total="filter.total" :page-size="filter.rows" @on-change="onPagechange" @on-page-size-change="onPagesizechange" show-sizer ></Page>
        
        <Modal
        v-model="operateModal"
        title="数据处理"
        >
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        
        <FormItem label="标题" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your title"></Input>
        </FormItem>
        <FormItem label="详情" prop="connect">
            <Input v-model="formValidate.connect" placeholder="Enter your connect"></Input>
        </FormItem>
        
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
        
       
    </Form>
    <div slot="footer">
           数据操作！
        </div>
    </Modal>
    </div>
</template>
<script>
import moment from 'moment';
export default {
    data(){
        return {
            data:[],
            list:[],
            filter:{
                total:0,
                rows:10,
                page:1,
                cateId:'',
                name:'',
                
            },
            id:0,
            ids:[],
            formValidate: {
                    name: '',
                    connect: '',
                    date:'',
                    cateId:''
                    
                },
                operateModal:false,
                ruleValidate: {
                    name: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ],
                    connect: [
                        { required: true, message: '评论内容不能为空', trigger: 'blur' },
                    ],
                   
                },
            columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                   {
                    title:'内容',
                    key:'connect'
                   },
                   {
                    title:'评论日期',
                    key:'date',
                    render:(h,params)=>{
                        return h('div', [
                                h('span', moment(params.row.date).format('YYYY-MM-DD HH:mm:ss'))
                            ]);
                    }
                   },
                   
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '6px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editDate(params)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除'),
                                
                            ]);
                        }
                    }
                ] 
        }
    },
    methods:{
        onSelectionChange(selection){
            var ids=[]
            for(let i=0;i<selection.length;i++){
                ids.push(selection[i]._id)
            }
            this.ids=ids
        },
        //搜索
        search(){
            this.filter.page=1
            this.getlistData()
        },
        //分页
        onPagechange(page){
            this.filter.page=page;
            this.getlistData()
        },
        onPagesizechange(rows){
            this.filter.rows=rows;
            this.getlistData()
        },
        //添加数据
        addDate(){
            this.formValidate.title=''
            this.formValidate.connect=''
            this.operateModal=true
        },
        //删除多个
        removes(){
            this.$Modal.confirm({
                title: '确认删除数据？',
                content: '<p>你确认删除该条数据吗</p>',
                onOk: () => {
                    

                    this.axios({
                        url:`http://localhost:3000/comment/removes`,
                        method:'post',
                        data:{
                            ids:this.ids.toString()
                        }
                    }).then(res=>{
                        this.$Message.info('删除数据成功')
                        this.getlistData()
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        //修改数据
        editDate(params){
            
            this.axios({
                url:`http://localhost:3000/comment/data/${params.row._id}`,
                method:'get'
            }).then(res=>{
               
                this.formValidate=res.data;
                this.operateModal=true;
                this.id=params.row._id;
                 
            })
        },
        //删除一个
        remove(params){
            this.$Modal.confirm({
                title: '确认删除数据？',
                content: '<p>你确认删除该条数据吗</p>',
                onOk: () => {
                    this.axios({
                        url:`http://localhost:3000/comment/data/${params.row._id}`,
                        method:'delete'
                    }).then(res=>{
                        this.$Message.info('删除数据成功')
                        this.getlistData()
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        //点击submit提交
        handleSubmit (name) {
           
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.formValidate.date=this.getNowFormatDate()
                    if(this.id!=0){
                        
                        this.axios({
                            url:`http://localhost:3000/comment/data/${this.id}`,
                            method:'put',
                            data:this.formValidate
                        }).then(res=>{
                        this.$Message.success('数据操作成功')
                        this.operateModal=false;
                        this.getlistData()
                        this.id=0
                        this.$refs[name].resetFields();
                        })
                    }else{
                        console.log(this.formValidate.cateId)
                        this.axios({
                        url:`http://localhost:3000/comment/data`,
                        method:'post',
                        data:this.formValidate
                    }).then(res=>{
                        this.$Message.success('数据操作成功')
                        this.operateModal=false;
                        this.getlistData()
                        this.$refs[name].resetFields();
                    })  
                    }
                   
                } else {
                    this.$Message.error('Fail!');
                }
            })
        },
        //清除form表单
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        //获取数据
        getlistData(){
            
            this.axios({
            url:`http://localhost:3000/comment/list`,
            method:'post',
            data:{
                rows:this.filter.rows,
                page:this.filter.page,
                cateId:this.filter.cateId,
                name:this.filter.name,
                parentId:this.filter.parentId
            }
        }).then(res=>{
            console.log(res.data)
            this.list=res.data.rows;
            this.filter.total=res.data.total;
        })
        },
        //获取日期
        getNowFormatDate() {
            var timestamp=new Date().getTime()
            return timestamp
        },
        cancel () {
            this.$Message.info('Clicked cancel');
            this.id=0
        },
    },
    //刷新
    mounted(){
        this.getlistData()
    },
    //接收ID
    created(){
        if(this.$route.params.newsId){
            this.filter.cateId=this.$route.params.newsId
            this.formValidate.cateId=this.$route.params.newsId
        }else{
            this.$router.push({name: 'news'})
        }
            
    }
}
</script>
